<template>
    <div class="star" :class="'star-'+size">
        <span  class="star-item" v-for="(sc,index) in scs" :class="sc" :key="index"></span>

    </div>
</template>

<script>
    export default {
        name: "star",
        props:{
            size:Number,
            score:Number
        },
        computed:{
            scs(){
                const {score}=this;
                const scs=[];
                //对分数取整，对应全星个数
                const int=Math.floor(score);
                for(let i=0;i<int;i++){
                    scs.push('on')
                }
                //四舍五入查看半星个数
                if(score*10-int*10>5){
                    scs.push("half")
                }
                //灰星个数
                while(scs.length<5){
                    scs.push('off')
                }

                return scs
            }
        },
        mounted(){


        }
    }
</script>

<style lang="stylus" scoped>
.star
    float:left
    &.star-48
        .star-item
            display:inline-block
            width:0.4rem
            height:0.4rem
            margin-right:0.2rem
            background-repeat:no-repeat
            background-size:0.4rem 0.4rem
            //background:red
            &.on
                background-image :url("./images/star48_on@2x.png")
            &.half
                background-image :url("./images/star48_half@2x.png")
            &.off
                background-image :url("./images/star48_off@2x.png")
    &.star-36
        .star-item
            display:inline-block
            width:0.3rem
            height:0.3rem
            margin-right:0.12rem
            background-repeat:no-repeat
            background-size:0.3rem 0.3rem
            &.on
                background-image :url("./images/star36_on@2x.png")
            &.half
                background-image :url("./images/star36_half@2x.png")
            &.off
                background-image :url("./images/star36_off@2x.png")

    &.star-24
        .star-item
            display:inline-block
            width:0.2rem
            height:0.2rem
            margin-right:0.06rem
            background-repeat:no-repeat
            background-size:0.2rem 0.2rem
            //background:blue
            &.on
                background-image :url("./images/star24_on@3x.png")
            &.half
                background-image :url("./images/star24_half@2x.png")
            &.off
                background-image :url("./images/star24_off@2x.png")
</style>
